<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>03键盘事件</title>
		<script src="../../js/vue.js"></script>
		<style>
			* {
				margin: 10px;
			}

			input {
				width: 300px;
				height: 40px;
				padding: 0 10px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<!-- 
			1.Vue中常用的按键别名:
					回车=> enter 
					删除=>delete(捕获“删除”和“退格”健)
					退出=>esc
					空格=>space
					换行=>tab(特殊，必须配合keydown使用)
					上=>up
					下=>down
					左=>left
					右=>right
			2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)
			
			3.系统修饰键(用法特殊）:ctrl、alt、shift、meta(windos的win按键) 
					(1).配合keyup使用:按下修饰健的同时，再按下其他键，随后释放其他键，事件才被触发。
					(2).配合keydown使用:正常触发事件。
					
					
			4.也可以使用keyCode去指定具体的按键(不推荐)
			  不同的键盘有可能它的keyCode不统一
			
			
			5.Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名；
			注意：
			ctrl.y组合键只有按下该组合键才能触发事件； 
		    -->
		<h1>欢迎来到{{name}}</h1>
		<div id="root">
			<!-- 回车=> enter -->
			<!-- <input type="text" placeholder="请输入您的姓名" @keyup.enter="showInfo" /> -->

			<br />
			<!-- 删除=>delete(捕获“删除”和“退格”健) -->
			<!-- <input type="text" placeholder="请输入您的姓名" @keyup.delete="showInfo" /> -->

			<br />
			<!-- 	退出=>esc -->
			<!-- <input type="text" placeholder="请输入您的姓名" @keyup.esc="showInfo" /> -->

			<br />
			<!-- 空格=>space -->
			<!-- <input type="text" placeholder="请输入您的姓名" @keyup.space="showInfo" /> -->

			<!-- tab(特殊，必须配合keydown使用) -->
			<!-- <input type="text" placeholder="请输入您的姓名" @keydown.tab="showInfo" /> -->


			<br />
			<!-- <h4>2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)</h4> -->
			<!-- 切换大小写  vue中没有提供的别名-->
			<!-- <input type="text" placeholder="请输入您的姓名" @keyup.caps-lock="showInfo" /> -->

			<!-- <h4>系统修饰键(用法特殊）</h4> -->
			<!-- 只有按下 ctrl 再抬起y才有效果-->
			<input type="text" placeholder="请输入您的姓名" @keyup.ctrl.y="showInfo" />

			<br />
			<!-- <h4>使用keyCode去指定具体的按键(不推荐)</h4> -->
			<!-- <input type="text" placeholder="请输入您的姓名" @keyup.13="showInfo" /> -->

			<br />
			<!-- <h4>Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名；</h4> -->
			<!-- <input type="text" placeholder="请输入您的姓名" @keyup.huiche="showInfo" /> -->

		</div>
		<script>
			//定义了一个别名按键
			Vue.config.keyCodes.huiche = 13;

			const vm = new Vue({
				el: '#root',
				data: function() {
					return {
						name: '读书点点'
					}
				},
				methods: {
					showInfo(event) {
						console.log('event.key:', event.key);
						console.log('event.code:', event.keyCode);
						console.log('event.target.value:', event.target.value);
					}
				}
			});
		</script>
	</body>
</html>